<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#myCanvas{
	background-color:#CCC;
	border:solid thin  #666;
}
</style>
<script language="javascript" src="js/bounceball.js"></script>
<script language="javascript" src="http://localhost/test/test.js.php">
</script>
</head>

<body>
<canvas id="myCanvas" width="640" height="480"></canvas>
</body>
</html>

<script language="javascript">
	window.onload = function()
	{	
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		
		var str = "";
		
		var ball_x = 50;
		var ball_y = 50;
		var ix = 1;
		var iy = 1;		
		
		setInterval(mainLoop, 1);
		
		function mainLoop()
		{	
			// Clear Screen			
			context.clearRect(0, 0, screenWidth, screenHeight);									

//			context.font = "40pt Arial";
			context.fillText( "នេះជាកាសាកល្បងបាល់ ឡងទៅវិញទៅមក HTML5", 200, 25 );			
			
			ball();
			context.stroke();

		}		
		
		function ball()
		{
			context.beginPath();
			context.arc(ball_x, ball_y, 25, 0, 2 * Math.PI, false);
			
			ball_x = ball_x + ix;
			ball_y = ball_y + iy;
			
			if ( ball_x > 590 )
			{
				ix = (-1);
			}else if ( ball_x < 50 )
			{
				ix = 1;
			}
			
			if ( ball_y > 430 )
			{
				iy = (-1);
			}else if ( ball_y < 50 )
			{
				iy = 1 ;
			}
			
			context.closePath();
			
			context.fillText( "x: " + ball_x, 100, 50 );
			context.fillText( "y: " + ball_y, 100, 60 );
		}
		
		
	}
	
	
</script>
